<template>
  <view class="main">
    <Empty v-if="friendList && friendList.length <= 0" />
    <view class="list" v-for="(item, index) in friendList" :key="index">
      <view class="item">
        <view class="top dispaly-just-between">
          <view class="title">好友申请通知</view>
          <view class="time">{{ item?.createTime }}</view>
        </view>
        <view class="middle dispaly-center">
          <view class="name">{{ item?.circleName }}</view>
          <view class="desc" style="margin-top: 8rpx"
            >{{ item?.createName }} 申请添加你为好友，请尽快审核</view
          >
        </view>
        <view class="desc" style="margin-top: 20rpx; font-size: 26rpx">{{
          item?.memo
        }}</view>
        <view class="option">
          <view class="btns dispaly-center">
            <view
              class="btn one dispaly-align-center"
              @click="passThrough(item, 1)"
              >同意</view
            >
            <view
              class="btn two dispaly-align-center"
              @click="passThrough(item, 2)"
              >拒绝</view
            >
          </view>
        </view>
      </view>
    </view>
    <!-- <LoadMore /> -->
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getFriendPage, getApplyFriendPage } from "@/api/apiList";
const friendList = ref();
const friendListData = async () => {
  const getFriendPageData = await getFriendPage({
    status: 0,
    pageSize: 9999,
    pageNum: 1,
  });
  if (getFriendPageData) {
    friendList.value = getFriendPageData?.rows;
  }
};
friendListData();

const passThrough = async (ids, type) => {
  const pamrs = {
    id: ids.id,
    status: type,
    createUser: ids.createUser,
    userId: ids.userId,
  };
  const response = await getApplyFriendPage(pamrs);
  if (response.code == 200) {
    uni.showToast({
      title: type == 1 ? "同意成功" : "拒绝成功",
      icon: "none",
    });
    friendListData();
  }
};
</script>

<style lang="scss" scoped>
.main {
  padding: 30rpx;

  .list {
    margin-bottom: 20rpx;

    .list:last-child {
      margin-bottom: 0;
    }

    .item {
      border-radius: 16rpx;
      background-color: #fff;
      padding: 20rpx;

      .top {
        .title {
          font-family: PingFang SC Regular;
          font-size: 32rpx;
          font-weight: normal;
          color: #111111;
        }

        .time {
          font-family: PingFang SC Regular;
          font-size: 24rpx;
          color: #999999;
        }
      }

      .middle {
        border-bottom: 1rpx solid #eee;
        padding-bottom: 24rpx;

        .name,
        .desc {
          font-family: PingFang SC Regular;
          font-size: 26rpx;
        }

        .name {
          color: #0753fd;
        }

        .desc {
          color: #111111;
        }
      }

      .option {
        display: flex;
        justify-content: flex-end;
        margin-top: 20rpx;

        .btns {
          .btn {
            padding: 20rpx 68rpx;
            border-radius: 8rpx;
            font-family: PingFang SC Regular;
            font-size: 30rpx;
            color: #fff;
          }

          .one {
            background-color: #2351f4;
            margin-right: 20rpx;
          }

          .two {
            background-color: #555555;
          }
        }
      }
    }
  }
}
</style>
